<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consul配置管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        
        .header {
            background-color: #007bff;
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .back-btn, .logout-btn {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .back-btn {
            background-color: #6c757d;
        }
        
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .panel {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .panel-title {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0069d9;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
        }
        
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        
        .error-message {
            color: #dc3545;
            margin-top: 15px;
            display: none;
        }
        
        .success-message {
            color: #28a745;
            margin-top: 15px;
            display: none;
        }
        
        .current-config {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>Consul配置管理</h2>
        <div>
            <button id="backBtn" class="back-btn">返回服务列表</button>
            <button id="logoutBtn" class="logout-btn">退出登录</button>
        </div>
    </div>
    
    <div class="container">
        <!-- 当前配置显示 -->
        <div class="panel">
            <h3 class="panel-title">当前Consul配置</h3>
            <div class="current-config">
                <p><strong>主机地址:</strong> <span id="currentHost">-</span></p>
                <p><strong>端口:</strong> <span id="currentPort">-</span></p>
                <p><strong>协议:</strong> <span id="currentScheme">-</span></p>
            </div>
        </div>
        
        <!-- 配置更新表单 -->
        <div class="panel">
            <h3 class="panel-title">更新Consul配置</h3>
            <form id="configForm">
                <div class="form-group">
                    <label for="host">Consul主机地址</label>
                    <input type="text" id="host" name="host" placeholder="例如: 127.0.0.1" required>
                </div>
                <div class="form-group">
                    <label for="port">Consul端口</label>
                    <input type="number" id="port" name="port" placeholder="例如: 8500" required>
                </div>
                <div class="form-group">
                    <label for="scheme">协议</label>
                    <select id="scheme" name="scheme" required>
                        <option value="http">HTTP</option>
                        <option value="https">HTTPS</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">更新配置</button>
                <div id="configError" class="error-message"></div>
                <div id="configSuccess" class="success-message"></div>
            </form>
        </div>
    </div>

    <script>
        // 检查是否有认证token
        const authToken = localStorage.getItem('authToken');
        if (!authToken) {
            window.location.href = '/static/index.html';
        }
        
        // 设置认证头
        const authHeaders = {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        };
        
        // 返回服务列表
        document.getElementById('backBtn').addEventListener('click', function() {
            window.location.href = '/static/services.html';
        });
        
        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', function() {
            localStorage.removeItem('authToken');
            window.location.href = '/static/index.html';
        });
        
        // 配置表单提交
        document.getElementById('configForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const configData = {
                host: document.getElementById('host').value,
                port: parseInt(document.getElementById('port').value),
                scheme: document.getElementById('scheme').value
            };
            
            fetch('/api/config/consul', {
                method: 'POST',
                headers: authHeaders,
                body: JSON.stringify(configData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    document.getElementById('configSuccess').textContent = data.message;
                    document.getElementById('configSuccess').style.display = 'block';
                    document.getElementById('configError').style.display = 'none';
                    
                    // 重新加载当前配置
                    loadCurrentConfig();
                } else if (data.error) {
                    document.getElementById('configError').textContent = data.error;
                    document.getElementById('configError').style.display = 'block';
                    document.getElementById('configSuccess').style.display = 'none';
                }
            })
            .catch(error => {
                document.getElementById('configError').textContent = '更新配置失败，请稍后重试';
                document.getElementById('configError').style.display = 'block';
                document.getElementById('configSuccess').style.display = 'none';
            });
        });
        
        // 加载当前配置
        function loadCurrentConfig() {
            console.log('正在加载Consul配置...');
            fetch('/api/config/consul', {
                headers: authHeaders
            })
            .then(response => {
                console.log('收到响应:', response);
                return response.json();
            })
            .then(config => {
                console.log('配置数据:', config);
                document.getElementById('currentHost').textContent = config.Host || '-';
                document.getElementById('currentPort').textContent = config.Port || '-';
                document.getElementById('currentScheme').textContent = config.Scheme || '-';
                
                // 填充表单默认值
                document.getElementById('host').value = config.Host || '';
                document.getElementById('port').value = config.Port || '';
                document.getElementById('scheme').value = config.Scheme || 'http';
            })
            .catch(error => {
                console.error('加载配置失败:', error);
            });
        }
        
        // 页面加载时获取当前配置
        document.addEventListener('DOMContentLoaded', loadCurrentConfig);
    </script>
</body>
</html>